<template>
  <el-card style="padding: 0;margin-bottom: 5px" v-for="item in questionArr">
    <div style="display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 24px;"
    >
      {{item.content}}
    </div>
    <el-row>
      <el-col :span="6">
          <span>
            {{item.createTime}}
          </span>
      </el-col>
    </el-row>
    <template #footer>
      <el-row>
        <el-col :span="6">
          <el-button :type="item.questionsFollowStatus" :icon="Pointer" @click="followQuestion(item)">
            关注问题
            <span style="margin-left: 5px">
              {{item.questionsFollows}}
            </span>
          </el-button>
        </el-col>
        <el-col :span="5">
          <el-button :icon="ChatLineSquare">
            回复数
            <span style="margin-left: 5px">
              {{item.articles}}
            </span>
          </el-button>
        </el-col>
        <el-col :span="5">
          <el-button :icon="View">
            浏览量
            <span style="margin-left: 5px">
              {{item.views}}
            </span>
          </el-button>
        </el-col>
        <el-col :span="1">
          <el-button :icon="View">
              <span>
             查看全文
            </span>
          </el-button>
        </el-col>
      </el-row>
    </template>

  </el-card>
</template>
<script setup>

import {ChatLineSquare, Pointer, Star, View} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";


//获取登录用户的信息
let user = getUser();

//定义变量，保存问题id和用户id
let likeReplyStatus = {articleId:'',userId:''};
//关注问题设置
const followQuestion = (item)=>{
  likeReplyStatus.questionId = item.id;
  likeReplyStatus.userId = item.userId;
  likeReplyStatus.likes = item.likes;
  likeReplyStatus.questionsFollows = item.questionsFollows;
  let data = qs.stringify(likeReplyStatus);
  if (item.questionsFollowStatus!=''){
    axios.post(BASE_URL+'/v1/personal/question/questionsFollowStatus',data).then((response)=>{
      if (response.data.code == 2000){
        item.questionsFollowStatus='';
        item.questionsFollows = item.questionsFollows - 1;
        ElMessage.success('取消关注');
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }else {
    axios.post(BASE_URL+'/v1/personal/question/questionsFollowStatus',data).then((response)=>{
      if (response.data.code == 2000){
        item.questionsFollowStatus='primary';
        item.questionsFollows =  Number(item.questionsFollows) + 1;
        ElMessage.success('已关注');
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

//定义变量，保存问题数据
const questionArr = ref([]);
//加载用户发布的文章
const loadQuestion = ()=>{
  axios.get(BASE_URL+'/v1/personal/question/loadQuestion?userId='+user.id).then((response)=>{
    if (response.data.code == 2000){
      questionArr.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}


//加载页面就查询用户发布的文章
onMounted(()=>{
  loadQuestion();
})
</script>


<style scoped>

</style>